<template>
  <!-- 实体分类及显示 -->
  <div class="rule-box">
    <div v-if="$route.query.name" class="back-title">
      <i class="el-icon-arrow-left" @click="$router.go(-1)">返回</i>
    </div>
    <div class="app-container hk-flex">
      <div class="tabs">
        <tabList ref="tabListRef" :data="tabs" :is-show-num="false" @handleClick="handleClick" />
      </div>
      <div class="hk-container">
        <search-form
          :data="queryParams"
          :field-list="filterInfo.fieldList"
          @handleSearch="handleQuery"
          @handleReset="resetQuery"
        />
        <hk-table
          :loading="loading"
          :table-data="tableData"
          :table-columns="tableFieldList"
          :total="total"
          :show-pag="true"
          :operate="false"
          :tablle-height="80"
          :show-index="true"
          :query-params="queryParams"
          @changePage="changePage"
        >
          <template #hostType="scope">
            <span v-if="scope.row.hostType">{{
              scope.row.hostType == 'terminal'
                ? '终端'
                : scope.row.hostType == 'server'
                  ? '服务器'
                    : '其他'
            }}</span>
          </template>
          <template #sex="scope">
            <span>{{ scope.row.sex == 0 ? '女' : '男' }}</span>
          </template>
          <template #productArchitecture="scope">
            <span>{{
              scope.row.productArchitecture == 1 ? 'B/C' : scope.row.productArchitecture == 2 ? 'C/S' : '其他'
            }}</span>
          </template>
          <template #productForm="scope">
            <span>{{
              scope.row.productForm == 1 ? '纯软件' : scope.row.productForm == 2 ? '纯硬件' : '软件+硬件'
            }}</span>
          </template>
          <template #os="scope">
            <span>{{ scope.row.os == 1 ? 'Windows' : 'Linux' }}</span>
          </template>
          <template #securityLevel="scope">
            <span>{{ scope.row.securityLevel == 1 ? '机密' : scope.row.securityLevel == 2 ? '秘密' : '非涉密' }}</span>
          </template>
        </hk-table>
      </div>
    </div>
  </div>
</template>

<script>
import SearchForm from '@/components/HkSearchform'
import tabList from '@/views/icp/components/tabList.vue'
import { getLeftTree, getTableList } from '@/api/icp/classDisplay'
import HkTable from '@/components/Hk-Table/index.vue'
import { ENTITY_TYPE } from '@/constants'

export default {
  name: 'GatherDatSourcePage',
  components: { tabList, HkTable, SearchForm },
  data() {
    return {
      loading: false,
      tabIndex: 0,
      // 显示搜索条件
      showSearch: true,
      propsData: {
        value: 'id',
        label: 'name',
        checkStrictly: true,
        multiple: false
      },
      productData: [],
      tabs: [],
      tableData: [],
      tableFieldList: [{ label: '主机IP', param: 'ip' },
        { label: '主机名称', param: 'hostName' },
        { label: '主机类型', param: 'hostType', type: 'slot' },
        { label: '主机MAC', param: 'mac' },
        { label: '部门名称', param: 'deptName' },
        { label: '责任人', param: 'userName' }],
      // 主机
      hostTableList: [
        { label: '主机IP', param: 'ip' },
        { label: '主机名称', param: 'hostName' },
        { label: '主机类型', param: 'hostType', type: 'slot' },
        { label: '主机MAC', param: 'mac' },
        { label: '部门名称', param: 'deptName' },
        { label: '责任人', param: 'userName' }
      ],
      // 人员
      personTableList: [
        { label: '姓名', param: 'name' },
        { label: '性别', param: 'sex', type: 'slot' },
        { label: '所在部门名称', param: 'deptName' },
        { label: '联系邮箱', param: 'email' },
        { label: '联系电话', param: 'phone' }
      ],
      // 应用
      appTableList: [
        { label: '应用访问IP', param: 'ip' },
        { label: '应用访问端口', param: 'port' },
        { label: '应用访问地址', param: 'accessAddress' },
        // { label: '资源状态类型', param: 'recordStatus' },
        // { label: '在线状态类型', param: 'runStatus'  },
        { label: '应用系统名称', param: 'appName' },
        { label: '应用系统编码', param: 'appId' },
        { label: '系统架构类型', param: 'productArchitecture', type: 'slot' },
        { label: '产品形态类型', param: 'productForm', type: 'slot' }
        // { label: '操作系统类型', param: 'os', type: 'slot',hidden:true }
      ],
      accountTableList: [
        { label: '用户账号', param: 'account' },
        { label: '角色名称', param: 'username' },
        // { label: '用户机构名称', param: 'userOrgName' },
        { label: '应用名称', param: 'appName' },
        { label: '应用类型名称', param: 'appTypeName' },
        { label: '应用提供商名称', param: 'appProvideName' },
        // { label: '账号创建人姓名', param: 'creatorName' },
        // { label: '账号创建人机构名称', param: 'creatorOrgName' }
        { label: '应用访问地址', param: 'appUrl' }
      ],
      // 数据
      dataTableList: [
        { label: '文件名称', param: 'fileName' },
        { label: '密集类型', param: 'securityLevel', type: 'slot' },
        { label: '文件类型', param: 'fileType' },
        { label: '起草人', param: 'drafter' },
        { label: '定密人', param: 'setter' },
        { label: '签发人', param: 'issuer' },
        { label: '定密时间', param: 'classifiedtime' },
        { label: '解密时间', param: 'declassifiedtime' },
        { label: '文件状态', param: 'fileStatus' }
      ],
      // 网络
      netTableList: [
        { label: '数据源名称', param: 'name', maxlength: 50 },
        { label: '接入产品', param: 'companyInfos' },
        { label: '接口IP', param: 'ip' },
        { label: '接口端口', param: 'port' },
        { label: '关联任务', param: 'tasks', type: 'slot' }
      ],
      total: 0,
      id: '0',
      queryParams: {
        current: 0,
        size: 10,
        entityId: Object.keys(ENTITY_TYPE)[0],
        search: undefined
      },
      filterInfo: {
        fieldList: [
          {
            label: '关键字',
            type: 'input',
            field: 'search',
            placeholder: '角色名称/账号名称/应用名称'
          }
        ]
      },
      editInfo: {},
      formData: {
        connectInfo: {}
      }
    }
  },
  mounted() {
    this.tableFieldList = this.hostTableList
    this.getLeftList()
    this.getList()
  },
  methods: {
    // 获取表格数据
    getList() {
      this.loading = true
      this.queryParams.scrollToTop = true
      getTableList(this.queryParams).then((res) => {
        this.tableData = res.list
        this.total = res.total
        this.loading = false
        this.queryParams.scrollToTop = false
      })
    },
    /** 获取左侧列表*/
    getLeftList() {
      getLeftTree().then((res) => {
        const result = res.filter(o => ENTITY_TYPE[o.entityId]).map((i) => {
          return {
            name: i.entityName,
            id: i.entityId,
            iconUrl: ENTITY_TYPE[i.entityId]?.iconUrl || undefined,
            total: i.total
          }
        })
        this.tabs = result
        if (this.$route.query) {
          switch (this.$route.query.name) {
            case 'host':
              this.$refs.tabListRef.handleClick(0)
              break
            case 'person':
              this.$refs.tabListRef.handleClick(1)
              break
            case 'app':
              this.$refs.tabListRef.handleClick(2)
              break
            case 'account':
              this.$refs.tabListRef.handleClick(3)
              break
          }
        }
      })
    },
    /** 左侧列表点击事件*/
    handleClick(index) {
      
      this.queryParams.current = 1
      this.queryParams.search = undefined
      this.tabIndex=index;
      this.queryParams.entityId = this.tabs[index].id
      switch (index) {
        case 0:
          this.tableFieldList = this.hostTableList
          break
        case 1:
          this.tableFieldList = this.personTableList
          break
        case 2:
          this.tableFieldList = this.appTableList
          break
        case 3:
          this.tableFieldList = this.accountTableList
          break
        case 4:
          this.tableFieldList = this.netTableList
          break
        case 5:
          this.tableFieldList = this.accountTableList
          break
        default:
          this.tableFieldList = this.hostTableList
      }
      this.getList()
    },
    /** 分页 */
    changePage(data) {
      this.getList()
    },
    /** 查询列表*/
    handleQuery(data) {
      this.queryParams.current = 1
      if (data) {
        this.queryParams.search = data.search
      } else {
        this.queryParams.search = ''
      }
      this.getList()
    },
    /**  重置列表*/
    resetQuery(data) {

      this.queryParams.search = undefined
      this.queryParams.entityId = this.tabs[this.tabIndex].id
      this.queryParams.size=10
      this.handleQuery()
    }
  }
}
</script>
<style lang="scss" scoped>
@mixin hk-flex {
  display: flex;
  justify-content: center;
}

//重定义样式
.app-container {
  width:100%;
  overflow: hidden;

  &.hk-flex {
    padding: 0;
    @include hk-flex;
    height: 100%;
    overflow: hidden;
    background: #eef0f5;
  }

  .hk-container {
    background: #fff;
    width: calc(100% - 310px);
    overflow: hidden;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    .targetTable {
      flex: 1;
      overflow-y:hidden;
    }
  }
}

::v-deep .el-table__body-wrapper {
  // height: calc(100% - 50px) !important;
  // overflow: auto !important;
}
</style>
